<template>
    <div class="Welcome">
        <div class="web"></div>
        <el-row type="flex" justify="space-around">
            <el-col :span="10" class="welcome_pic">
                <img src="@/assets/Welcome2.jpg" width="100%" height="75%" alt="">       
            </el-col>
            <el-col :span="10" style="z-index:200000;">
                <transition-group
                enter-active-class="fadeInUp"
                leave-active-class="fadeOutUp"
                :duration="{enter:3000,leave:3000}">
                    <login v-if="flag" @toggle="change" class="animated" :key="'login'"></login>
                    <register v-else @toggle="change" class="animated" :key="'register'"></register>
                </transition-group>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import register from '@/components/welcome/register.vue'
import login from '@/components/welcome/login.vue'
export default {
    name: 'Welcome',
    data(){
        return{
            flag: true
        }
    },
    methods:{
        change(){
            this.flag = !this.flag
        },
    },
    components:{
        register,
        login,
    }
}
</script>
<style scoped>
.welcome{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
img{
    display: block;
    margin: 10% auto 0px;
}
.web{
    position: absolute;
    top: 20px;
    left: -200px;
    height: 90%;
    width: 90%;
    z-index: 1000;
}
.el-col{
    position: relative;
    width: 90%;
    height: 650px;
    margin: 0px auto;
    overflow: hidden;
}
.welcome_pic{
    border: 1px solid #44ffff;
    box-shadow: 0 0 10px #ddd;
    border-radius: 5%;
    /* transform: translateY(10%); */
}
</style>